<script setup lang="ts">
import Coverage from './comp/Coverage.vue'
import HonorRoll from './comp/HonorRoll.vue'
import SalesVolume from './comp/SalesVolume.vue'
import OrderDistribute from './comp/OrderDistribute.vue'
import DisChannel from './comp/DisChannel.vue'
import HotSales from './comp/HotSales.vue'
import HotSalesDetail from './comp/HotSalesDetail.vue'
import OrderStatusList from './comp/OrderStatusList.vue'
import ShopLinkJump from './comp/ShopLinkJump.vue'
import { ref, Ref } from 'vue'
import { hostSales as Enum} from '@/contants/home'
const hotSalesType :Ref<Enum>= ref(Enum['花卉'])
const hotSalesBarClick = (type :Enum) :Enum => {
  hotSalesType.value = type
  return hotSalesType.value
}
</script>
<template>
  <el-row style="display: flex;overflow: hidden;flex-wrap: nowrap">
    <el-col :span="6" class="right">
      <el-row >
        <el-col>
          <el-card shadow="hover" header="订单数量">
            <div style="height: 160px">
              <div class="ans-box">订单数量<span class="ans-num">1000</span>笔</div>
              <div class="ans-box">较昨日：<span class="ans-num"><el-icon color="#f65b5e"><Bottom /></el-icon>2</span>%</div>
              <div class="ans-box">较上月：<span class="ans-num"><el-icon color="#7fc56f"><Top /></el-icon>5</span>%</div>
              <div class="ans-box">年度目标：<span class="width-auto"><el-progress :text-inside="true" :stroke-width="26" :percentage="70" /></span></div>
            </div>
          </el-card>
        </el-col>
        <el-col>
         <el-card shadow="hover" header="热卖指数">
          <div style="height: 600px">
            <div style="height:300px">
              <hot-sales height="300" @clickBar="hotSalesBarClick"/>
            </div>
            <div style="height: 300px">
              <hot-sales-detail height="300" :type="hotSalesType"/>
            </div>
          </div>
         </el-card>
        </el-col>
        <el-col>
          <el-card shadow="hover" header="销售渠道">
            <div style="height: 200px">
              <dis-channel height="200"/>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
    <el-col  :span="12"  class="right">
      <el-row  style="width: 100%;" class="bottom">
        <div class="xsescxd right" >
          <el-card shadow="hover" header="销售额">
            <div class="ans-box">销售额<span class="ans-num">1000</span>笔</div>
            <div class="ans-box">较昨日：<span class="ans-num"><el-icon color="#f65b5e"><Bottom /></el-icon>2</span>%</div>
            <div class="ans-box">较上月：<span class="ans-num"><el-icon color="#7fc56f"><Top /></el-icon>5</span>%</div>
            <div class="ans-box">年度目标：<span class="width-auto"><el-progress status="success" :text-inside="true" :stroke-width="26" :percentage="90" /></span></div>
          </el-card>
        </div>
        <div class="xsescxd" >
          <el-card shadow="hover" header="县级覆盖率">
            <div style="height: 160px;display: flex;align-items: flex-start;">
              <el-col class="coverage-image" :span="12" >
                <Coverage />
              </el-col>
              <el-col class="coverage-title-box" :span="11">
                <div class="coverage-title">
                  综合覆盖率：<span class="coverage-text">70</span>%
                </div>
                <div class="coverage-title">
                  北京覆盖率：<span class="coverage-text">99</span>%
                </div>
                <div class="coverage-title">
                  上海覆盖率：<span class="coverage-text">90</span>%
                </div>
                <div class="coverage-title">
                  广州覆盖率：<span class="coverage-text">80</span>%
                </div>
                <div class="coverage-title">
                  深圳覆盖率：<span class="coverage-text">60</span>%
                </div>
                <div class="coverage-title">
                  杭州覆盖率：<span class="coverage-text">50</span>%
                </div>
              </el-col>
            </div>
          </el-card>
        </div>
      </el-row>
      <el-row  style="width: 100%" class="bottom">
        <el-card shadow="hover" header="订单数量分布">
          <div style="height: 600px">
            <order-distribute height="600" />
          </div>
        </el-card>
      </el-row>
      <el-row  style="width: 100%">
        <el-card shadow="hover" header="销售额分布">
          <div style="height: 200px">
            <sales-volume />
          </div>
        </el-card>
      </el-row>
    </el-col>
    <div :span="6" style="width: 21vw;">
      <el-col :span="24">
        <el-card shadow="hover" header="本月销冠排行">
          <div style="height:400px">
            <honor-roll height="400"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover" header="订单信息">
          <div style="height: 350px">
            <order-status-list />
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover" header="店铺地址快捷跳转">
          <div style="height: 200px">
            <shop-link-jump />
          </div>
        </el-card>
      </el-col>
    </div>
  </el-row>
</template>
<style lang="scss" scoped>
.el-col {
  margin-bottom: 10px;
}
.right {
  margin-right: 10px;
}
.bottom {
  margin-bottom: 10px;
}
.el-card {
  width: 100%
}
.xsescxd {
  width: calc(50% - 5px)!important;
}
.ans-box {
  display: flex;
  font-size: 16px;
  align-items: center;
  line-height: 40px;
}
.ans-box .width-auto {
  flex: 1
}
.ans-num {
  font-weight: 800;
  margin-right: 10px;
  font-size: 20px;
}
.ans-num {
  .el-icon {
    margin-right: 5px;
  }
}
.coverage-title-box {
  display: inline-block;
}
.coverage-image {
  display: inline-block;
}
@media screen and (max-width: 1800px) {
  .coverage-title-box {
    display: none;
  }
  .coverage-image {
    margin: 0 auto;
  }
}
.coverage-title {
  color: var(--el-text-color-regular);
  font-size: 14px;
  line-height: 26px;
  .coverage-text {
    color: var(--el-text-color-primary);
    font-size: 18px;
    margin: 0px 5px;
  }
}
</style>
